<template>
  <f7-page>
      <qm-currentcy-navbar title="积分说明">
      <template #nav-right>
        <f7-icon f7="ellipsis"></f7-icon>
      </template>
    </qm-currentcy-navbar>
    <div>
      <div class="titles">具体规则</div>
      <div class="title1">1.签到领积分：</div>
      <div class="title2">用户单独一天签到每天5积分，连续7天以上，每天10积分</div>
      <div class="title1">2.浏览学习资讯</div>
      <div class="title2">浏览一篇学习资讯2积分，一天最多可获取10积分</div>
      <div class="title2">分享一篇学习资讯2积分，一天最多可获取4积分</div>
      <div class="title1">3.学习课程</div>
      <div class="title2">每观看完一个课程视频，获得20积，没看完不算</div>
      <div class="title2">完成课后作业,正确率 * 10积分</div>
      <div class="title2">完成学习考核,正确率 * 50积分</div>
    </div>

    <div class="data-table card">
      <table>
        <thead>
          <tr>
            <th class="numeric-cell">积分上限</th>
            <th class="label-cell">称号</th>
            <th class="label-cell">达成所需天数</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in data" :key="item.title">
            <td class="numeric-cell">{{item.point}}</td>
            <td class="label-cell">{{item.title}}</td>
            <td class="label-cell">{{item.day}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </f7-page>
</template>
<style scoped>
.titles {
  width: 100px;
  margin: 15px auto;
  margin-bottom: 5px;
  font-size: 16px;
  color: black;
  text-align: center;
}
.title1 {
  margin: 12px 10px;
  font-size: 14px;
}
.title2 {
  margin: 8px 20px;
}
</style>

<script>
export default {
  data() {
    return {
      data: [
        {
          point: 0,
          title: "小药童",
          day: ""
        },
        {
          point: 50,
          title: "学徒",
          day: "约3天"
        },
        {
          point: 200,
          title: "大师兄",
          day: "约15天"
        },
        {
          point: 800,
          title: "郎中",
          day: "约30天"
        },
        {
          point: 1600,
          title: "太常",
          day: "约90天"
        },
        {
          point: 3000,
          title: "御医",
          day: "约150天"
        },
        {
          point: 5000,
          title: "大国医",
          day: "约300天"
        }
      ]
    };
  }
};
</script>

